<style lang="less">
    @import '../../styles/common.less';
</style>

<template>
	<div >
		<Card :bordered="false">
			<p slot="title">支付码</p>
			<Row style="margin-bottom: 15px;">
				<Input placeholder="商家" v-model="searchMsg" style="width: 120px" />
				<Button type="success" @click="search('search')">查询</Button>
				<Button type="primary" @click="modal1=true">新增</Button>
				<div class="f_r">
				  <Button  type="warning" @click="searchPayCode('',true)">导出</Button>
				</div>
			</Row>
			<div>
				<Table :columns="columns" ref="Table" border :data="data.payCodeList"></Table>
				<Page :total="data.total"  style="margin-top: 10px;" :current="startIndex" 
				 :page-size='pageSize'
				 @on-change="onPage"></Page>
			</div>
		</Card>
		
		<Modal
			v-model="modal1"
			title="新增支付码"
			@on-ok="modifyPayCode('ADD')">
			<p style="margin-bottom: 5px;">请输入支付码数量!</p>
			<Input placeholder="支付码数量" v-model="count" />
		</Modal>
		
		<Modal
			v-model="modalsj"
			title="请选择要绑定的商家"
			@on-ok="modifyPayCode('BIND')">
			
			<Select v-model="searchMerchant" placeholder="选择商家" >
				<Option
				v-for="item in merchants"
				:value="item.merchantUuid"
				:key="item.merchantUuid"
				>{{item.merchantName}}
				</Option>
			</Select>
		</Modal>
		
	</div>
</template>

<script>
export default {
    data () {
        return{
			columns:[],
			data:[],
			startIndex:1,
			pageSize:50,
			searchMsg:"",
			modal1:false,
			count:'',
			modalsj:false,
			searchMerchant: [],
			merchants:[],
			row:""
		}
	},
	methods:{
		initTable(){ //初始化表格
			this.columns=[
				{
					title: '设备id',
					key: 'deviceId',
					align:"center"
				},
				{
					title: '绑定商家',
					key: 'merchantName',
					align:"center"
				},
				{
					title: '二维码',
					key: 'codeImageUrl',
					align:"center",
					fixed: 'center',
					render (h,params) {
						return h("img", {
							attrs: {
								src: params.row.codeImageUrl
							},
							style: {
								width: '80px',
								height: '80px',
								'margin-top': '5px'
							}
						})
					}
				},
				{
					title: '绑定时间',
					key: 'bindDate',
					align:"center"
				},
				{
					title: '创建时间',
					key: 'createDate',
					align:"center"
				},
				{
					title: '操作',
					key: 'address',
					align: 'center',
					width: 400,
					render: (h, params) => {
						return h('div',[
							params.row.merchantUuid
							?h("Poptip",
								{
								  props: {
									confirm: true,
									title: "您确定要解绑吗?",
									transfer: true
								  },
								  on: {
									"on-ok": () => {
									  this.modifyPayCode('UNBIND',params.row.payCodeUuid)
									}
								  }
								},[
									h(
									"Button",
										{
											style: {
											  margin: "0 20px 0 0",
											},
											props: {
											  type: "primary",
											  size: "small"
											},
											on: {
												click: event => {
													// this.row=params.row;
													
												}
											}
										},
										"解绑"
									)
								]
							
							)
							:h("Button",
								{
									style: {
									  margin: "0 20px 0 0",
									},
									props: {
									  type: "success",
									  size: "small"
									},
									on: {
										click: event => {
											this.row=params.row;
											this.modalsj=true;
										}
									}
								},
								"绑定"
							),
							h("Poptip",
								{
								  props: {
									confirm: true,
									title: "您确定要删除吗?",
									transfer: true
								  },
								  on: {
									"on-ok": () => {
									  this.modifyPayCode('DELETE',params.row.payCodeUuid)
									}
								  }
								},[
									h(
									"Button",
										{
											style: {
											  margin: "0 20px 0 0",
											},
											props: {
											  type: "error",
											  size: "small"
											},
											on: {
												click: event => {
													// this.row=params.row;
													
												}
											}
										},
										"删除"
									)
								]
							
							),
							h("Button",
								{
									style: {
									  margin: "0 20px 0 0",
									},
									props: {
									  // type: "error",
									  size: "small"
									},
									on: {
										click: event => {
											console.log(params.row.codeImageUrl)
											window.open(params.row.codeImageUrl)
										}
									}
								},
								"下载二维码"
							),
						]);
					}
				},
				
			];
				
		},
		searchPayCode(type,is) {
		  let searchOptions = {
		    startIndex: (this.startIndex-1)*10,
		    pageSize: this.pageSize
		  };
		  let keyArray = [];
		  var isTo=is;
		  if(isTo){
			  searchOptions.pageSize=100000;
		  }
		  //判断是否有手机号码查询条件
		  if (type =="search") {
			 if(this.searchMsg!=""){
				 keyArray.push("MERCHANTNAME");
				 searchOptions.merchantName = this.searchMsg.trim();
			 }
		  }
		  
		  searchOptions.keyArray = keyArray;
		  this.loading = true;
		  this.$http.post("/admin/searchPayCode", this.common.request(searchOptions)).then((res)=>{
				this.data=res.data.body.data;
				for(var i=0;i<this.data.payCodeList.length;i++){
					if(this.data.payCodeList[i].bindDate){
						this.data.payCodeList[i].bindDate=this.Dateformat(this.data.payCodeList[i].bindDate)
					}
					if(this.data.payCodeList[i].createDate){
						this.data.payCodeList[i].createDate=this.Dateformat(this.data.payCodeList[i].createDate)
					}
					
				}
				if(isTo){
					var data = res.data.body.data;
					data.payCodeList.forEach((obj)=>{
						obj.deviceId='\t'+obj.deviceId
							
						if(obj.createDate){
							obj.createDate='\t'+obj.createDate
						}
						if(obj.bindDate){
							obj.bindDate='\t'+obj.bindDate
						}
						
					})
					this.$refs.Table.exportCsv({
						filename: "支付码",
						columns: this.columns,
						data: data.payCodeList
					});
				}
				
		  });
		},
		onPage(e){
			this.startIndex=e;
			this.searchPayCode();
		},
		search(){
			// if(this.searchMsg =="")return;
			this.searchPayCode('search');
		},
		modifyPayCode(type,pay,uid){
			let searchOptions = {};
			
			searchOptions.actionType=type;
			
			if(type =='ADD'){
				if(this.count ==''){
					this.$Message.error('请输入支付码数量');
					return
				};
				searchOptions.count=this.count;
			}else if(type =='BIND'){
				searchOptions.payCodeUuid=this.row.payCodeUuid
				searchOptions.merchantUuid=this.searchMerchant;
			}else if(type =='UNBIND'){
				searchOptions.payCodeUuid=pay
			}else if(type =='DELETE'){
				searchOptions.payCodeUuid=pay
			}
			
			
			this.$http.post("/admin/changePayCode", this.common.request(searchOptions)).then((res)=>{
				// console.log(res.data)
				this.searchPayCode();
			});
			this.searchPayCode();
		},
		inquiryMerchant() {
		  var keyArray = [];
		  var options = {
		    startIndex: 0,
		    pageSize: 50
		  };
		  
		  keyArray.push('MERCHANTNAME');
		  options.merchantName = name;
		  
		  options.keyArray=keyArray;

		  this.$http
		    .post("/admin/searchMerchant", this.common.request(options))
		    .then(
		      response => {
		        if (response.data.body.status.statusCode == 0) {
		          var data = response.data.body.data;
		          this.merchants = data.merchants;
		        } else {
		          this.$Message.error(response.data.body.status.errorDesc);
		        }
		      },
		      response => {
		        this.$Message.error("查询商家失败");
		      }
		    );
		},
		
		Dateformat(sj){
			var sj=sj.split('T');
			return sj[0]+' '+sj[1].split('.')[0]
		}

	},
	mounted() {
		this.initTable();
		this.searchPayCode();
		this.inquiryMerchant();
	}
    
    
};
</script>

<style type="text/css" lang="less">
	
</style>